<template>
    <div  class="wb_box">
        <div class="wb_head">
          <van-row>
                    <van-col :span="3">
                        <div style="text-align: left" @click="goToUser(weiboRecord.userInfo.userId)">
<!--                            <img :src=" + weiboRecord.userInfo.avatar?'/dh/' +  weiboRecord.userInfo.avatar : avatarImg" style="width: 100%;border-radius:100%;">-->
                            <van-image round  fit="cover"
                                       :src="weiboRecord.userInfo.avatar?'/dh' +  weiboRecord.userInfo.avatar : avatarImg" />
                        </div>
                    </van-col>
                    <van-col :span="10" style="padding-top: 5px">
                        <div   class="wb_nick_name" @click="goToUser(weiboRecord.userInfo.userId)">
                            {{ weiboRecord.userInfo.nickName? weiboRecord.userInfo.nickName: weiboRecord.userInfo.username}}
                        </div>
                        <div  class="wb_time" >
                            {{ weiboRecord.wbInfo.createTime}}
                        </div>
                    </van-col>
                <van-col :span="9">

                </van-col>
                <van-col  :span="2">
                    <div style="text-align: right" v-if="weiboRecord.userInfo.userId === userSt.userinfo.userId">
                      <van-popover :actions="actions"  placement="left-start" @select="editWB">
                        <template #reference>
                          <img :src="moreImg" style="width: 100%;">
                        </template>
                      </van-popover>
                    </div>
                </van-col>
            </van-row>

        </div>
        <div class="wb_content">
            <p style="margin-bottom: 10px">{{ weiboRecord.wbInfo.wbContent}}</p>
             <Thumbnail :file_data = "weiboRecord.wbFileAll"></Thumbnail>
        </div>
<!--        <div  class="wb_buttom">-->
<!--                <div  class="wb_interactive" @click="gotoComm(o)">-->
<!--                    <img style="width: 100%;" src="../assets/img/command.png" alt="">-->
<!--                </div>-->
<!--                <div  class="wb_interactive_font"  @click="gotoComm(o)">-->
<!--                  123-->
<!--                </div>-->
<!--                <div  class="wb_interactive"  @click="goodJob(o.wbInfo.id)">-->
<!--                    <img style="width: 100%;" :src="goodImg" alt="">-->
<!--                </div>-->
<!--                <div  class="wb_interactive_font" @click="goodJob(o.wbInfo.id)" >-->
<!--                    123-->
<!--                </div>-->
<!--        </div>-->
<!--        <div   class="wb_buttom_com">-->
<!--            <div class="com_tag ">-->
<!--                <p>评论</p>-->
<!--                <p>点赞</p>-->
<!--            </div>-->

<!--        </div>-->
    </div>


</template>

<script setup>

import avatarImg from "@/assets/panda.png";
import moreImg from "@/assets/more.png";
import goodImg from "@/assets/good.png";
import Thumbnail from "@/components/thumbnail.vue";
import {onMounted, reactive, ref} from "vue";
import {useRouter,useRoute} from 'vue-router'
import {userStore} from "@/stores/UserStore.js"
import {uploadStore} from "@/stores/UploadStorage.js";

const props = defineProps({
    "weiboRecord":Object,
    "bottomShow":String,
})

const userSt = userStore()


const router = useRouter();

const goToUser= (userId) =>{
    console.log(userId)
}
const goodJob =(wbId) =>{
    console.log(wbId)
}
const gotoComm =(wbInfo) =>{
    console.log(wbInfo)
    router.push({name:"wbdetail", params:  {wbInfo: JSON.stringify(wbInfo)}})
}

const showPopover = ref(false)

const actions = [
  { text: '删除', icon: 'cross', color: 'red' },
];


const more = defineEmits(['showMore'])

const editWB = (ac) =>{
  if("删除" == ac.text){
    more ("showMore", props.weiboRecord.wbInfo.id)
  }
}

</script>

<style scoped>


.wb_nick_name{
    text-align: left;line-height: 22px;padding-left: 12px;
    color: #ffa61f ;
    font-size: 16px;
}
.wb_box{
    border-radius: 2px;
    background-color: #FFFFFF;
     //box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
}
.wb_head{
    padding: 12px 8px 0px ;
}
.wb_time{
  text-align: left;
  line-height: 20px;
  padding-left: 12px;color: #9e9e9e;
    font-size: 14px;
}
.wb_content{
  text-align: left;
    padding: 12px 8px ;
    color: #787878;
    font-size: 18px;
    word-wrap: break-word;
}
.wb_buttom{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.wb_interactive{
    width: 22px;
}
.wb_interactive_font{
    display: inline-block;
    margin-right: 12px;
    color:  #9e9e9e;
}
.wb_buttom_com{
    padding: 6px 0;
    border-top: 0.1px #dcdfe6 solid;
}
.com_tag{
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #787878;
    font-size: 15px;
}
</style>